<template>
	<view class="withdrawalPage">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="withdrawalPage-view" v-if="userInfo">
			<view class="withdrawalPage-view-title"><text>提现金额</text></view>
			<view class="withdrawalPage-view-num"><text>¥</text><text class="_view-num">{{userInfo.balance}}</text></view>
			
			<view class="withdrawalPage-main">
				<view class="pay-way-box">
					<!-- <view class="pay-way-title"><text>选择到账方式</text></view>
					<view class="pay-way-item" :class="payWayType == 1?'pay-way-item-active':''" @click="payWayType = 1">
						<view class="pay-way-item-content">
							<view class="pay-way-item-logo"><image class="pay-way-item-logo-img" src="../../static/img/aliPay-icon.png" mode=""></image></view>
							<view class="pay-way-item-title"><text>支付宝</text></view>
						</view>
						<view class="pay-way-item-check">
							<u-icon name="checkbox-mark" color="#ffffff" size="24" v-if="payWayType == 1"></u-icon>
						</view>
					</view>
					<view class="pay-way-item" :class="payWayType == 2?'pay-way-item-active':''" @click="payWayType = 2">
						<view class="pay-way-item-content">
							<view class="pay-way-item-logo"><image class="pay-way-item-logo-img" src="../../static/img/wxPay-icon.png" mode=""></image></view>
							<view class="pay-way-item-title"><text>微信</text></view>
						</view>
						<view class="pay-way-item-check">
							<u-icon name="checkbox-mark" color="#ffffff" size="24" v-if="payWayType == 2"></u-icon>
						</view>
					</view> -->
					<view class="pay-account-item">
						<view class="pay-account-item-label"><text>支付宝账号</text></view>
						<view class="pay-account-item-val"><input class="pay-account-item-val-input" type="text" v-model="zfbAccount" placeholder="请输入支付宝账号" placeholder-style="color: #5E6272;" /></view>
					</view>
					<view class="pay-account-item">
						<view class="pay-account-item-label"><text>真实姓名</text></view>
						<view class="pay-account-item-val"><input class="pay-account-item-val-input" type="text" v-model="name" placeholder="请输入真实姓名" placeholder-style="color: #5E6272;" /></view>
					</view>
				</view>
			</view>
		</view>
		<view class="pay-btn" @click="handleWithdrawal">
			<text>提现</text>
		</view>
		
		<!-- 弹窗 -->
		<u-popup :show="successShow" :round="20" mode="center" :overlayOpacity="0.8" @close="successPopupClose" @open="successPopupOpen" bgColor="transparent">
			<view class="tipsPopup">
				<view class="tipsPopup-icon">
					<image v-if="popupType == 1" class="tipsPopup-icon-img" src="../../static/img/success-icon.png" mode=""></image>
					<image v-if="popupType == 2 || popupType == 3" class="tipsPopup-icon-img" src="../../static/img/warn-icon.png" mode=""></image>
				</view>
				<view class="tipsPopup-text" v-if="popupType == 1"><text>提现成功</text></view>
				<view class="tipsPopup-text" v-if="popupType == 2">
					<text>您还没有进行实名认证，无法进行提现，请先进行实名认证</text>
				</view>
				<view class="tipsPopup-text" v-if="popupType == 3">
					<text>与实名认证不是同一个人，提现失败</text>
				</view>
				<view class="tipsPopup-confirm" v-if="popupType == 1 || popupType == 3" @click="confirmOk"><text>知道啦</text></view>
				<view class="tipsPopup-confirm" v-if="popupType == 2" @click="toRealName"><text>实名认证</text></view>
				<image class="cancel-icon" @click="successPopupClose" src="../../static/img/cancel-icon.png" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle:'提现',
				payWayType:1, // 1 支付宝 2 微信
				successShow:false,
				popupType:2, // 1 提现成功  2 未进行实名认证   3 刷脸失败提现失败
				userInfo:null,
				zfbAccount:'',
				returnUrl:'',
				name:'', // 支付宝账号的真实姓名
			};
		},
		onLoad(option) {
			if (this.$util.getUrlVal().response) {
				this.userInfo = uni.getStorageSync('userInfo') || null;
				let withdrawal = uni.getStorageSync('withdrawal');
				if (withdrawal) {
					this.zfbAccount = withdrawal.mobile;
					this.name = withdrawal.name;
				}
				let response = this.$util.getUrlVal().response
				let responseData = decodeURIComponent(response)
				// console.log(JSON.parse(responseData.split('#')[0]))
				let responseDataJson = JSON.parse(responseData.split('#')[0]);
				if (responseDataJson.code == 1000) {
					this.certifyId = responseDataJson.extInfo.certifyId;
					this.$api.describeFaceVerifyV2({certifyId:this.certifyId}).then(data => {
						// console.log(data)
						if (data.code == 200) {
							if (data.data.verifyResult == '1') {
								// uni.showToast({
								// 	title:'成功',
								// 	icon:'none'
								// })
								setTimeout(() => {
									// uni.reLaunch({
									// 	url:'/pages/myCenter/myCenter'
									// })
									if (Window) {
										let link = window.location.origin+''+window.location.pathname+'#/pages/withdrawalPage/withdrawalPage?withdrawal=1'
										// let winRef = window.open('url','_blank')
										// winRef.location = link;
										window.location.replace(link)
									}
								},500)
							} else {
								uni.showToast({
									title:'认证失败',
									icon:'none'
								})
							}
						}
					})
				} else {
					let status = {
						'1001':'系统错误',
						'1003':'验证中断',
						'2002':'网络错误',
						'2003':'客户端设备时间错误',
						'2006':'提现失败'
					}
					uni.showToast({
						title:status[responseDataJson.code]?status[responseDataJson.code]:'未知错误',
						icon:'none'
					})
					this.popupType = 3;
					this.successShow = true;
				}
			} else {
				this.getUserInfo()
			}
			
			// console.log(option)
			// 提现认证成功，进行提现
			if (option.withdrawal) {
				this.userInfo = uni.getStorageSync('userInfo') || null;
				let withdrawal = uni.getStorageSync('withdrawal');
				if (withdrawal) {
					this.zfbAccount = withdrawal.mobile;
					this.name = withdrawal.name;
					if (this.userInfo.balance) {
						this.$api.payTransfer({
							"mobile": this.zfbAccount,
							"amount": '0.01',
							"payType": "0",
							"name": this.name
						}).then(res => {
							if (res.code == 200) {
								uni.removeStorageSync('withdrawal');
								this.popupType = 1;
								this.successShow = true;
							}
						})
					}
				}
			} else {
				if (!this.$util.getUrlVal().response) {
					this.userInfo = uni.getStorageSync('userInfo') || null;
					this.zfbAccount = this.userInfo.aliAccount || '';
					this.name = this.userInfo.aliName || '';
				}	
			}
		},
		methods:{
			successPopupOpen() {
				this.successShow = true;
			},
			successPopupClose() {
				this.successShow = false
				if (this.popupType == 1) {
					uni.redirectTo({
						url:'/pages/myWallet/myWallet'
					})
				}
				// console.log('close');
			},
			handleWithdrawal() {
				if (this.userInfo && this.userInfo.authState == 1) {
					// #ifdef H5
					if (window) {
						this.returnUrl = window.location.href;
					}
					// #endif
					let metaInfo = getMetaInfo();
					this.$api.initFaceVerify({
						"certName": "", //姓名
						"certNo": "", //身份证号
						"metaInfo": JSON.stringify(metaInfo), //MetaInfo环境参数
						"returnUrl": this.returnUrl //回调地址 .h5 必填
					}).then(res => {
						console.log(res)
						// return false
						if (res.code == 200) {
							uni.setStorageSync('withdrawal',{
								mobile:this.zfbAccount,
								name:this.name
							})
							let link = res.data.certifyUrl;
							window.location.replace(link)
						}
					})
				} else {
					this.popupType = 2;
				}
			},
			confirmOk() {
				this.successShow = false;
				if (this.popupType == 1) {
					uni.redirectTo({
						url:'/pages/myWallet/myWallet'
					})
				}
			},
			toRealName() {
				this.successShow = false;
				uni.navigateTo({
					url:'/pages/realName/realName'
				})
			},
			getUserInfo() {
				this.$api.getUserInfo().then(res => {
					console.log(res)
					if (res.code == 200) {
						this.userInfo = res.data;
						if (this.userInfo.authState == 1) {
							this.popupType = 1;
						}
						uni.setStorageSync('userInfo',res.data)
					} else {
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.withdrawalPage{
		width: 100%;
		min-height: 100vh;
		background-color: #16181D;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		display: flow-root;
		.withdrawalPage-view{
			margin-top: 288rpx;
			width: 100%;
			.withdrawalPage-view-title{
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 56rpx;
				text-align: center;
			}
			.withdrawalPage-view-num{
				font-size: 48rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				margin-top: 4rpx;
				line-height: 112rpx;
				._view-num{
					font-size: 80rpx;
				}
			}
			.withdrawalPage-main{
				padding: 0 48rpx;
				box-sizing: border-box;
				.pay-way-box{
					margin-top: 132rpx;
					width: 100%;
					
					.pay-account-item{
						width: 100%;
						margin-bottom: 24rpx;
						.pay-account-item-label{
							font-size: 24rpx;
							font-weight: 400;
							color: #5E6272;
						}
						.pay-account-item-val{
							border-bottom: 1px solid #262A34;
							.pay-account-item-val-input{
								border: none;
								font-size: 32rpx;
								font-weight: 600;
								color: #FFFFFF;
								margin-top: 32rpx;
								margin-bottom: 24rpx;
							}
						}
					}
					
					.pay-way-title{
						font-size: 26rpx;
						font-weight: 600;
						color: #5E6272;
					}
					.pay-way-item{
						height: 144rpx;
						background: #181A20;
						border-radius: 24rpx;
						border: 2rpx solid rgba(255, 255, 255, 0.13);
						margin-top: 16rpx;
						display: flex;
						flex-wrap: nowrap;
						justify-content: space-between;
						align-items: center;
						.pay-way-item-content{
							display: flex;
							flex-wrap: nowrap;
							justify-content: flex-start;
							align-items: center;
							.pay-way-item-logo{
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
								overflow: hidden;
								margin: 0 32rpx;
								.pay-way-item-logo-img{
									width: 100%;
									height: 100%;
								}
							}
							.pay-way-item-title{
								font-size: 32rpx;
								font-weight: 500;
								color: #FFFFFF;
							}
						}
						.pay-way-item-check{
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							border: 2rpx solid rgba(255, 255, 255, 0.4);
							margin-right: 48rpx;
						}
					}
					.pay-way-item-active{
						border:2rpx solid rgba(163, 57, 216, 1);
						.pay-way-item-check{
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							border: none;
							margin-right: 48rpx;
							background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
						}
					}
				}
			}
		}
		.pay-btn{
			width: 686rpx;
			height: 88rpx;
			background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
			border-radius: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			margin-bottom: 32rpx;
		}
		.tipsPopup{
			width: 590rpx;
			height: 610rpx;
			background: #262A34;
			border-radius: 40rpx;
			font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
			font:caption;
			position: relative;
			padding: 0 86rpx;
			box-sizing: border-box;
			.tipsPopup-icon{
				width: 168rpx;
				height: 168rpx;
				margin: 68rpx auto 24rpx;
				.tipsPopup-icon-img{
					width: 100%;
					height: 100%;
				}
			}
			.tipsPopup-title{
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
			}
			.tipsPopup-text{
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 56rpx;
				text-align: center;
				margin-top: 44rpx;
			}
			.tipsPopup-confirm{
				width: 406rpx;
				height: 88rpx;
				margin: 68rpx auto 0;
				background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
				border-radius: 45rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 88rpx;
				text-align: center;
			}
			.cancel-icon{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 40rpx;
				right: 48rpx;
			}
		}
	}
</style>
